
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫彩历史计算器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6c5ce7;
            --secondary: #a29bfe;
            --accent: #fd79a8;
            --dark: #2d3436;
            --light: #f5f6fa;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            transition: all 0.3s ease;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .calculator-container {
            width: 100%;
            max-width: 900px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .calculator {
            width: 100%;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .display {
            width: 100%;
            height: 100px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            margin-bottom: 20px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-end;
            color: white;
            overflow: hidden;
        }
        
        .previous-operand {
            font-size: 1.2rem;
            opacity: 0.7;
            height: 25px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            text-align: right;
        }
        
        .current-operand {
            font-size: 2.5rem;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            text-align: right;
        }
        
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }
        
        button {
            aspect-ratio: 1/1;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        button:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .span-two {
            grid-column: span 2;
            aspect-ratio: 2/1;
        }
        
        .operator {
            background: rgba(108, 92, 231, 0.5);
        }
        
        .equals {
            background: rgba(253, 121, 168, 0.7);
        }
        
        .clear, .delete {
            background: rgba(45, 52, 54, 0.5);
        }
        
        .history {
            width: 100%;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .history-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .history-item {
            padding: 10px;
            margin-bottom: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            cursor: pointer;
        }
        
        .history-item:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        @media (min-width: 768px) {
            .calculator-container {
                flex-direction: row;
            }
            
            .history {
                max-height: 600px;
            }
        }
        
        @media (max-width: 500px) {
            .calculator {
                padding: 15px;
            }
            
            .buttons {
                gap: 10px;
            }
            
            button {
                font-size: 1.2rem;
            }
            
            .current-operand {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="calculator-container">
        <div class="calculator">
            <div class="display">
                <div class="previous-operand" id="previous-operand"></div>
                <div class="current-operand" id="current-operand">0</div>
            </div>
            <div class="buttons">
                <button class="clear span-two">AC</button>
                <button class="delete">DEL</button>
                <button class="operator">÷</button>
                <button>7</button>
                <button>8</button>
                <button>9</button>
                <button class="operator">×</button>
                <button>4</button>
                <button>5</button>
                <button>6</button>
                <button class="operator">-</button>
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button class="operator">+</button>
                <button class="span-two">0</button>
                <button>.</button>
                <button class="equals">=</button>
            </div>
        </div>
        
        <div class="history">
            <div class="history-title">计算历史</div>
            <div id="history-list"></div>
        </div>
    </div>

    <script>
        const currentOperandElement = document.getElementById('current-operand');
        const previousOperandElement = document.getElementById('previous-operand');
        const historyList = document.getElementById('history-list');
        const numberButtons = document.querySelectorAll('button:not(.operator):not(.equals):not(.clear):not(.delete)');
        const operatorButtons = document.querySelectorAll('.operator');
        const equalsButton = document.querySelector('.equals');
        const clearButton = document.querySelector('.clear');
        const deleteButton = document.querySelector('.delete');
        
        let currentOperand = '0';
        let previousOperand = '';
        let operation = undefined;
        let resetScreen = false;
        let calculationHistory = JSON.parse(localStorage.getItem('calcHistory')) || [];
        
        function updateDisplay() {
            currentOperandElement.innerText = currentOperand;
            previousOperandElement.innerText = previousOperand + (operation ? ' ' + operation : '');
        }
        
        function updateHistory() {
            historyList.innerHTML = '';
            calculationHistory.forEach((item, index) => {
                const historyItem = document.createElement('div');
                historyItem.className = 'history-item';
                historyItem.innerHTML = `
                    <div>${item.expression} = ${item.result}</div>
                    <small>${new Date(item.timestamp).toLocaleString()}</small>
                `;
                historyItem.addEventListener('click', () => {
                    currentOperand = item.result;
                    updateDisplay();
                });
                historyList.appendChild(historyItem);
            });
        }
        
        function saveToHistory(expression, result) {
            calculationHistory.unshift({
                expression,
                result,
                timestamp: new Date().toISOString()
            });
            
            if (calculationHistory.length > 20) {
                calculationHistory.pop();
            }
            
            localStorage.setItem('calcHistory', JSON.stringify(calculationHistory));
            updateHistory();
        }
        
        function appendNumber(number) {
            if (currentOperand === '0' || resetScreen) {
                currentOperand = '';
                resetScreen = false;
            }
            if (number === '.' && currentOperand.includes('.')) return;
            currentOperand += number;
        }
        
        function chooseOperation(op) {
            if (currentOperand === '') return;
            if (previousOperand !== '') {
                compute();
            }
            operation = op;
            previousOperand = currentOperand;
            currentOperand = '';
            resetScreen = false;
        }
        
        function compute() {
            let computation;
            const prev = parseFloat(previousOperand);
            const current = parseFloat(currentOperand);
            if (isNaN(prev) || isNaN(current)) return;
            
            let operationSymbol = '';
            switch (operation) {
                case '+': operationSymbol = '+'; break;
                case '-': operationSymbol = '-'; break;
                case '×': operationSymbol = '×'; break;
                case '÷': operationSymbol = '÷'; break;
            }
            
            const fullExpression = `${previousOperand} ${operationSymbol} ${currentOperand}`;
            
            switch (operation) {
                case '+':
                    computation = prev + current;
                    break;
                case '-':
                    computation = prev - current;
                    break;
                case '×':
                    computation = prev * current;
                    break;
                case '÷':
                    computation = prev / current;
                    break;
                default:
                    return;
            }
            
            saveToHistory(fullExpression, computation.toString());
            currentOperand = computation.toString();
            operation = undefined;
            previousOperand = '';
            resetScreen = true;
        }
        
        function clear() {
            currentOperand = '0';
            previousOperand = '';
            operation = undefined;
        }
        
        function deleteNumber() {
            if (currentOperand.length === 1) {
                currentOperand = '0';
            } else {
                currentOperand = currentOperand.slice(0, -1);
            }
        }
        
        numberButtons.forEach(button => {
            button.addEventListener('click', () => {
                appendNumber(button.innerText);
                updateDisplay();
            });
        });
        
        operatorButtons.forEach(button => {
            button.addEventListener('click', () => {
                chooseOperation(button.innerText);
                updateDisplay();
            });
        });
        
        equalsButton.addEventListener('click', () => {
            compute();
            updateDisplay();
        });
        
        clearButton.addEventListener('click', () => {
            clear();
            updateDisplay();
        });
        
        deleteButton.addEventListener('click', () => {
            deleteNumber();
            updateDisplay();
        });
        
        document.addEventListener('keydown', (e) => {
            if ((e.key >= '0' && e.key <= '9') || e.key === '.') {
                appendNumber(e.key);
                updateDisplay();
            } else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
                chooseOperation(e.key === '*' ? '×' : e.key === '/' ? '÷' : e.key);
                updateDisplay();
            } else if (e.key === 'Enter' || e.key === '=') {
                compute();
                updateDisplay();
            } else if (e.key === 'Escape') {
                clear();
                updateDisplay();
            } else if (e.key === 'Backspace') {
                deleteNumber();
                updateDisplay();
            }
        });
        
        updateHistory();
    </script>
</body>
</html>
